﻿@model Orchard.MediaLibrary.ViewModels.MediaLibraryPickerFieldViewModel
@using Orchard.ContentManagement
@using Orchard.Utility.Extensions;
@using Orchard.MediaLibrary.Settings;

@{
    Script.Require("jQueryUI_Sortable").AtFoot();
    Style.Include("media-library-picker-admin.css");

    Script.Require("jQueryColorBox");
    Style.Require("jQueryColorBox");
    
    var settings = Model.Field.PartFieldDefinition.Settings.GetModel<MediaLibraryPickerFieldSettings>();
    var contentManager = WorkContext.Resolve<IContentManager>();
    var fieldIdForSelectedIds = Html.FieldIdFor(m => m.SelectedIds);
    var fieldIdForIds = Html.FieldIdFor(m => m.Field.Ids);
}

<fieldset>
    <label @if(settings.Required) { <text>class="required"</text> }>@Model.Field.DisplayName</label>
    <div id="save-message-@fieldIdForIds" class="message message-Warning media-library-picker-message">@T("You need to save your changes.")</div>
    <div id="media-library-picker-@fieldIdForIds" class="items media-library-picker" summary="@Model.Field.DisplayName">
        <ul>
            @foreach (var contentItem in Model.ContentItems) {
                var editRouteValues = contentManager.GetItemMetadata(contentItem).EditorRouteValues;
                var editUrl = Url.Action(
                    Convert.ToString(editRouteValues["action"]),
                    editRouteValues.Merge(new RouteValueDictionary { { "ReturnUrl", Request.RawUrl } }));
                <li>
                    <div data-id="@contentItem.Id" data-fieldid="@fieldIdForIds" class="media-library-picker-item">
                        <div class="thumbnail">
                            @Display(contentManager.BuildDisplay(contentItem, "Thumbnail"))
                            <div class="overlay">
                                <h3>@Html.ItemDisplayText(contentItem)</h3>                         
                            </div>

                        </div>
                    </div>
                    <a href="#" data-id="@contentItem.Id" class="media-library-picker-remove">@T("Remove")</a>@T(" | ")
                    <a href="@editUrl">@T("Edit")</a>
                </li>
            }
        </ul>
    </div>

    <div>
        <span id="btn-@fieldIdForIds" class="button">@T("Add")</span>
    </div>
    
    @Html.HiddenFor(m => m.SelectedIds)
    <span class="hint">@settings.Hint</span>
</fieldset>

@using (Script.Foot()) {
<script type="text/javascript">
//<![CDATA[

    (function($) {

        var multiple = @(settings.Multiple ? "true" : "false");
        var addButton = $('#btn-@fieldIdForIds');
        var @(fieldIdForIds)_Template = 
            '<li><div data-id="{contentItemId}" data-fieldid="@fieldIdForIds" class="media-library-picker-item"><div class="thumbnail">{thumbnail}<div class="overlay"><h3>{title}</h3></div><div></div><a href="#" data-id="{contentItemId}" class="media-library-picker-remove">@T("Remove")</a>@T(" | ")<a href="{editLink}?ReturnUrl=@Request.RawUrl">@T("Edit")</a></li>';
        
        var refreshIds = function() {
            var id = $('#@fieldIdForSelectedIds');
            id.val('');
            $("div[data-fieldid = @fieldIdForIds]").each(function() {
                id.val(id.val() + "," + $(this).attr("data-id"));
            });

            var itemsCount = $("div[data-fieldid = @fieldIdForIds]").length;
            
            if(!multiple && itemsCount > 0) {
                addButton.hide();    
            }
            else {
                addButton.show();
            }
        };
        
        window.mediaLibraryDirty = false;
        var showSaveMsg = function() {
            $('#save-message-@fieldIdForIds').show();
            window.mediaLibraryDirty = true;
        };
        if (!window.mediaLibraryNavigateAway) {
            $(window).on("beforeunload", window.mediaLibraryNavigateAway = function() {
                if (window.mediaLibraryDirty) {
                    return "@HttpUtility.JavaScriptStringEncode(T("You have unsaved changes. Please only accept to leave if you don't mind losing those changes.").Text)";
                }
            });
            $("#@(fieldIdForSelectedIds)").closest("form").on("submit", function() {
                window.mediaLibraryDirty = false;
            });
        }

        refreshIds();
        
        addButton.click(function() {
            var url = '@HttpUtility.JavaScriptStringEncode(Url.Action("Index", "Admin", new {area = "Orchard.MediaLibrary", dialog = true}))';
            $.colorbox({
                href: url,
                iframe: true,
                reposition: true,
                width: "100%",
                height: "100%",
                onLoad: function() { // hide the scrollbars from the main window
                    $('html, body').css('overflow', 'hidden');
                    $('#cboxClose').remove();
                },
                onClosed: function() {
                    $('html, body').css('overflow', '');
                    var selectedData = $.colorbox.selectedData;
                    if (selectedData == null) // Dialog cancelled, do nothing
                        return;
                    for (var i = 0; i < selectedData.length; i++) {
                        var template = @(fieldIdForIds)_Template
                            .replace(/\{contentItemId\}/g, selectedData[i].id)
                            .replace(/\{thumbnail\}/g, selectedData[i].thumbnail)
                            .replace(/\{title\}/g, selectedData[i].title)
                            .replace(/\{editLink\}/g, selectedData[i].editLink);
                        var content = $(template);
                        $('#media-library-picker-@fieldIdForIds ul').append(content);
                    }
                    
                    refreshIds();

                    if (selectedData.length) {
                        showSaveMsg();
                    }
                }
            });
            
        });

        $(document).on("click",'#media-library-picker-@fieldIdForIds .media-library-picker-remove', function(e) {
            e.preventDefault();
            if (!confirm("@HttpUtility.JavaScriptStringEncode(T("Do you really want to remove that media?").Text)")) return false;
            $(this).closest('li').remove();
            refreshIds();
            showSaveMsg();
            return false;
        });
            
        $("#media-library-picker-@fieldIdForIds ul").sortable({
            handle: '.thumbnail',
            stop: function() {
                refreshIds();
                showSaveMsg();
            }
        }).disableSelection();
        
    })(jQuery);
//]]>
</script>
}